<!-- 确认收款 -->
<template>
  <div class="index-container" v-if="detailInfo">
    <van-notice-bar v-if="noticeTxt" scrollable :text="noticeTxt" />
    <van-nav-bar title="确认收款" fixed>
      <template #left>
        <van-icon name="arrow-left" size="18" color="#333333" @click="onClickLeft" />
      </template>
    </van-nav-bar>
    <van-notice-bar color="#C76060" background="#FFECEC" mode="closeable"> 警告：订单一旦确认不可撤回！</van-notice-bar>
    <img class="img1" src="../../assets/image/card/1.png" alt="">
    <div class="confirm-box">
      <div class="confirm-box-top">请确认已经收到</div>
      <div class="confirm-box-mid" style="align-items:center">
        <span>买家：</span>
        <span>{{detailInfo.userName}}</span>
        <img src="../../assets/image/index/phone.png" style="width:25px;height:25px">
        <span>{{detailInfo.phone}}</span>
      </div>
      <div class="confirm-box-bottom">
        <span>购买的商品：</span><span class="colorF3B24D">{{detailInfo.productName}}</span>
      </div>
    </div>
    <p class="title">收款订单</p>
    <p style="color: #85C4CB;font-size: 14px;margin-left: 20px"><span>收款分销商:</span><span style="padding-left: 10px">{{ detailInfo.agencyName }}({{ detailInfo.agencyCode }})</span></p>
    <div class="income-box">
      <div class="income-box-item"><span>收款人：</span><span>{{offlinePaymentInfo.name}}</span></div>
      <div class="income-box-item"><span>收款银行：</span><span>{{offlinePaymentInfo.bank}}</span></div>
      <div class="income-box-item"><span>收款卡号：</span><span>{{offlinePaymentInfo.account}}</span></div>
      <div class="income-box-item"><span style="width: 70px;color: #333333;">需付款：</span><span style="color:#FC4A38;font-size: 20px;font-weight:bold">&yen;{{detailInfo.paymentAmount}}</span></div>
    </div>
    <div class="btns">
      <div class="btn b1" @click="onClickLeft">取消</div>
      <!-- <div class="btn b2" v-if="!loading" @click="handleConfirm">确认</div> -->
      <van-button class="btn b2" style="border:none" :loading="loading"  @click="handleConfirm">确认</van-button >
    </div>
  </div>
</template>

<script>
import { getOrderDetail, confirmReceipt } from '@/api/order'
export default {
  data() {
    return {
      loading: false,
      detailInfo: null,
      offlinePaymentInfo: {
        name: null,
        bank: null,
        account: null
      }
    }
  },
  computed: {
    noticeTxt() {
      return this.$store.state.app.noticeTxt
    }
  },
  created() {
    this.queryOrderDetail()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    async queryOrderDetail() {
      const { data } = await getOrderDetail({ orderId: parseInt(this.$route.query.id) })
      this.detailInfo = data || {}
      const offlinePaymentInfo = data.offlinePaymentInfo && data.offlinePaymentInfo.split('\n')
      this.offlinePaymentInfo.name = offlinePaymentInfo[0].split('：')[1]
      this.offlinePaymentInfo.bank = offlinePaymentInfo[1].split('：')[1]
      this.offlinePaymentInfo.account = offlinePaymentInfo[2].split('：')[1]
    },
    changeFormat(num) {
      if ((num + '').trim() === '') {
        return ''
      }
      if (String(num).indexOf(',') === -1) {
        num = parseFloat(num)
        num = num.toFixed(2)
        num = parseFloat(num)
        num = num.toLocaleString()
      } else {
        num = num.replace(/,/gi, '')
        num = parseFloat(num)
      }
      return Number(num)
    },
    handleConfirm() {
      this.loading = true
      const { relSiteId, orderCode, paymentAmount } = { ...this.detailInfo }
      const sendData = {
        relSiteId: relSiteId,
        orderNo: orderCode,
        payAmount: this.changeFormat(paymentAmount)
      }
      confirmReceipt(sendData).then(res => {
        this.$toast('确认收款成功')
        this.loading = false
        this.$router.push({
          name: 'Home'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .img1 {
    width: 375px;
    height: 214px;
    position: relative;
  }
  .btns {
    display: flex;
    justify-content: space-between;
    width: 345px;
    margin-left: 15px;
    margin-top: 20px;
    .btn {
      width: 160px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border-radius: 20px;
      font-size: 14px
    }
    .b1 {
      border: 1px solid #888888;
      background:#fff;
      color: #888888;
    }
    .b2 {
      background: #FC4A38;
      color: #fff;
    }
  }
  .confirm-box {
    margin: -30px auto 0;
    width: 345px;
    height: 132px;
    background: #FFFFFF;
    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.03);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    &-top {
      font-size: 15px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #333333;
      position: absolute;
      left: 20px;
      top:20px;
    }
    &-mid {
      position: absolute;
      left: 20px;
      top: 54px;
      display: flex;
      font-size: 14px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #333333;
      img {
        width: 16px;
        height: 16px;
        margin-left: 60px;
      }
    }
    &-bottom {
      position: absolute;
      left: 20px;
      top: 88px;
      display: flex;
      font-size: 14px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #333333;
    }
  }
  .title {
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    margin-top: 120px;
    margin-left: 15px;
  }
  .income-box {
    margin-left: 15px;
    width: 305px;
    padding: 20px;
    height: 136px;
    background: #F8F9FD;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    &-item:last-child {
      align-self: flex-end;
    }
    &-item {
      span:nth-child(1) {
        font-size: 14px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #888888;
        width: 80px;
        display: inline-block;
      }
      span:nth-child(2) {
        font-size: 14px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
</style>
